<template>
  <div class="xingZhenRegion_page">
    <div v-show="!isShowAddressSelect">
      <content-page :is-screen="true">
        <pageHeader :show-back="true" ads-type="2" @openSelectAds="openSelectAds" />
        <pageTitleCom :type-list="typeList" @changeType="changeType" />
        <div class="xzr_w3_box1">
          <div class="xzr_w3_box1_left">
            <img crossorigin="anonymous" class="xzr_w3_box1_img" src="../../assets/icon/catalog.png">
            <span class="xzr_w3_box1_text">{{ recommendName }}</span>最新成交均价
          </div>
          <div class="xzr_w3_box1_right"><span class="xzr_w3_box1_price">12465</span> 元/平米
          </div>
        </div>

        <div v-show="currentTypeIndex===0">
          <div class="xzr_page_warp3">
            <div class="xzr_ads_warp1">
              <span class="xzr_ads_t">小区地址：</span>
              <span class="xzr_ads_con">上海市浦东新区长岛路728弄1-69号</span>
            </div>
            <div class="xzr_school_warp">
              <span class="xzr_sch_t">对口学校：</span>
              <span v-for="i in 6" :key="i" class="xzr_sch_con">{{ i }}学校数据;</span>
            </div>
            <!--echarts图上面的图标板块-->
            <div class="xzr_w3_options">
              <div class="xzr_w3_opt2" @click="openSelectTime">时间: {{ selectTime }}
                <van-icon name="arrow-down" />
              </div>
              <div class="xzr_w3_opt3">
                <div>市场活跃指数</div>
                <div class="xzr_w3_opt3_warp">
                  <span class="xzr_w3_opt3_l">0.00</span>
                  <div class="xzr_w3_opt3_line" />
                  <span class="xzr_w3_opt3_r">50.26</span>
                </div>
              </div>
              <div class="xzr_w3_opt4">
                <div class="xzr_w3_opt4_title">度量名称</div>
                <div class="xzr_w3_opt4_type">
                  <span class="xzr_w3_opt4_span1">平均价格</span>
                  <span class="xzr_w3_opt4_span2">边际价格</span>
                </div>
              </div>
            </div>
            <!--echarts图-->
            <div class="xzr_w3_Echarts_warp">
              <div id="xzrEcharts" class="xzr_w3_trendEcharts" />
            </div>
            <!--推荐房源-->
            <div class="xzr_recommend_title">
              <img src="../../assets/icon/flames.png" alt="" class="xzr_title_img">
              {{ recommendName }}在售房源推荐TOP5
            </div>
            <div class="xzr_recommend_warp">
              <div v-for="(itemReco,indexReco) in recommendList" :key="indexReco">
                <recommendItem :recommend-item="itemReco" />
              </div>
            </div>
          </div>
        </div>
        <div v-show="currentTypeIndex===1">
          <div class="xzr_page_warp3">
            <div class="xzr_ads_warp1">
              <span class="xzr_ads_t">小区地址：</span>
              <span class="xzr_ads_con">上海市浦东新区长岛路728弄1-69号</span>
            </div>
            <div class="xzr_school_warp">
              <span class="xzr_sch_t">对口学校：</span>
              <span v-for="i in 6" :key="i" class="xzr_sch_con">{{ i }}学校数据;</span>
            </div>
            <!--echarts图上面的图标板块-->
            <div class="xzr_w3_options">
              <div class="xzr_w3_opt2" @click="openSelectTime">时间: {{ selectTime }}
                <van-icon name="arrow-down" />
              </div>
              <div class="xzr_w3_opt3">
                <div>市场活跃指数</div>
                <div class="xzr_w3_opt3_warp">
                  <span class="xzr_w3_opt3_l">0.00</span>
                  <div class="xzr_w3_opt3_line" />
                  <span class="xzr_w3_opt3_r">50.26</span>
                </div>
              </div>
              <div class="xzr_w3_opt4">
                <div class="xzr_w3_opt4_title">度量名称</div>
                <div class="xzr_w3_opt4_type">
                  <span class="xzr_w3_opt4_span1">平均价格</span>
                  <span class="xzr_w3_opt4_span2">边际价格</span>
                </div>
              </div>
            </div>
            <!--echarts图-->
            <div class="xzr_w3_Echarts_warp">
              <div id="xzrEcharts2" class="xzr_w3_trendEcharts" />
            </div>
          </div>
          <!--          标题 -->
          <div class="xzr_recommend_title">{{ recommendName }}历史成交房源明细</div>
          <div class="xzr_select_warp">
            <div class="xzr_select_type" @click="openSelectHouseType">
              <span>请选择户型：</span>
              <span class="xzr_type_text">{{ selectHouseType }}</span>
              <van-icon name="arrow-down" />
            </div>
            <div class="xzr_select_time" @click="openSelectTime">
              <span>时间：</span>
              <span class="xzr_time_text">{{ selectTime }}</span>
              <van-icon name="arrow-down" />
            </div>
          </div>
          <!--          步骤条-->
          <div class="xzr_step_warp">
            <van-steps direction="vertical" :active="0" active-color="#ff0000" inactive-color="#ff0000">
              <van-step>
                <div class="step_time">2020年6月1号</div>
                <div class="step_con">
                  <span class="step_con1"> 成交价: 800万元;</span>
                  <span class="step_con2">中楼层(共11层);</span>
                  <span class="step_con3">135.28㎡;</span>
                  <span class="step_con4">有电梯;</span>
                  <span class="step_con5">成交单价;</span>
                  <span class="step_con6">123,456万元;</span>
                </div>
              </van-step>
              <van-step>
                <div class="step_time">2020年7月1号</div>
                <div class="step_con">
                  <span class="step_con1"> 成交价: 800万元;</span>
                  <span class="step_con2">中楼层(共11层);</span>
                  <span class="step_con3">135.28㎡;</span>
                  <span class="step_con4">有电梯;</span>
                  <span class="step_con5">成交单价;</span>
                  <span class="step_con6">123,456万元;</span>
                </div>
              </van-step>
              <van-step>
                <div class="step_time">2020年8月1号</div>
                <div class="step_con">
                  <span class="step_con1"> 成交价: 800万元;</span>
                  <span class="step_con2">中楼层(共11层);</span>
                  <span class="step_con3">135.28㎡;</span>
                  <span class="step_con4">有电梯;</span>
                  <span class="step_con5">成交单价;</span>
                  <span class="step_con6">123,456万元;</span>
                </div>
              </van-step>
              <van-step>
                <div class="step_time">2020年9月1号</div>
                <div class="step_con">
                  <span class="step_con1"> 成交价: 800万元;</span>
                  <span class="step_con2">中楼层(共11层);</span>
                  <span class="step_con3">135.28㎡;</span>
                  <span class="step_con4">有电梯;</span>
                  <span class="step_con5">成交单价;</span>
                  <span class="step_con6">123,456万元;</span>
                </div>
              </van-step>

            </van-steps>
          </div>
        </div>
        <div v-show="currentTypeIndex===2">
          <div class="xzr_type3_title">遗留问题：金融属性</div>
          <div class="xzr_type3_html">
            <div v-html="showHtml" />
          </div>
        </div>

      </content-page>
    </div>
    <div v-show="isShowAddressSelect">
      <address-select @closeSelectCity="closeSelectAds" />
    </div>
    <!--  时间的弹窗  -->
    <van-popup v-model="isShowTimePopup" position="bottom">
      <van-picker
        show-toolbar
        :columns="columnsTimes"
        @confirm="onConfirmTime"
        @cancel="isShowTimePopup = false"
      />
    </van-popup>
    <!--    户型的选择 -->
    <van-popup v-model="isShowHouseTypePopup" position="bottom">
      <van-picker
        show-toolbar
        :columns="columnsHouseType"
        @confirm="onConfirmHouseType"
        @cancel="isShowTimePopup = false"
      />
    </van-popup>
  </div>
</template>

<script>
import contentPage from '../../components/content_page'
import pageTitleCom from '../../components/page_title_com'
import pageHeader from '../../components/page_header'
import addressSelect from '../../components/addressSelect'
import recommendItem from '../../components/recommendItem'
export default {
  name: 'XiaoQuDetail',
  components: { contentPage, pageTitleCom, pageHeader, addressSelect, recommendItem },
  data() {
    return {
      typeList: [{ id: 0, name: '冰山指数' }, { id: 1, name: '成交指数' }, { id: 2, name: '金融评价' }],
      currentTypeIndex: 0,
      selectAddress: '上海',
      isShowAddressSelect: false, // 地址选择页面是否打开
      isHavePay: false, // 是否已经解锁
      isShowHouseTypePopup: false, // 选择户型的popup
      isShowTimePopup: false, // 时间选择的popup
      columnsHouseType: ['一室', '两室', '三室', '四室', '五室', '五室以上', '不限条件'],
      selectHouseType: '三室',
      selectTime: '一年', // 默认时间
      columnsTimes: ['一年', '全部'], // 时间选择popup内容
      personnelIndex: [2.6, 5.9, 9.0, 26.4, 28.7, 70.637, 60.6, 70.2, 48.7, 18.8, 6.0, 80],
      personnelIndex1: [12345, 34534, 57316, 42445, 97255, 47727, 69306, 87849, 50108, 12689, 17434, 68906],
      recommendList: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }], // 推荐房源数组
      recommendName: '东方知音菀',
      stepList: [],
      showHtml: '<ul><li data-v-12279d06="">1、目标：导流冰山金融</li><li >2、小区评估里有金融属性和学区属性</li><li >3、提供金融属性具体数据表信息（银行白名单、额度等）</li><li >4、有助理二维码</li></ul>',
    }
  },
  computed: {
    personnelIndex1Data() {
      const tempArr = this.personnelIndex1 || [0]
      return tempArr.map((item, index) => {
        return item / 1000
      })
    },
  },
  created() {
  },
  mounted() {
    this.drawChart()
    this.drawChart2()
  },
  methods: {
    changeType(id) {
      this.currentTypeIndex = id
    },
    openSelectAds() {
      this.isShowAddressSelect = !this.isShowAddressSelect
    },
    closeSelectAds() {
      this.isShowAddressSelect = !this.isShowAddressSelect
    },
    openSelectTime() {
      this.isShowTimePopup = !this.isShowTimePopup
    },
    onConfirmTime(value) {
      this.selectTime = value
      this.isShowTimePopup = !this.isShowTimePopup
    },
    onConfirmHouseType(value) {
      this.selectHouseType = value
      this.isShowHouseTypePopup = !this.isShowHouseTypePopup
    },
    /** 打开选择户型号**/
    openSelectHouseType() {
      this.isShowHouseTypePopup = !this.isShowHouseTypePopup
    },

    /**  当前行政区echarts图 **/
    drawChart() {
      const xzrEcharts = document.getElementById('xzrEcharts') // 对应地使用ByClassName
      const myChart = this.$echarts.init(xzrEcharts)
      myChart.setOption({
        xAxis: [
          {
            type: 'category',
            data: ['20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26'],
            axisPointer: {
              type: 'shadow',
            },
            axisLabel: {
              interval: 0,
              rotate: 90,
            },
          },
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        yAxis: [
          {
            type: 'value',
            name: '市场活跃指数',
            min: 0,
            max: 100,
            interval: 10,
          },
          {
            type: 'value',
            name: '房价指数',
            min: 0,
            max: 100,
            interval: 5,
            axisLabel: {
              formatter: '{value} k',
            },
          },
        ],
        series: [
          {
            name: '市场活跃指数',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 81, 60.2, 32.6, 20.0, 6.4, 3.3],
            itemStyle: {
              normal: {
                barBorderRadius: false,
                color: (params) => {
                  const currentValue = parseInt(params.value)
                  if (currentValue > 0 && currentValue <= 10) {
                    return '#ceeac5'
                  }
                  if (currentValue > 10 && currentValue <= 30) {
                    return '#b1dda8'
                  }
                  if (currentValue > 30 && currentValue <= 50) {
                    return '#9ecc96'
                  }
                  if (currentValue > 50 && currentValue <= 80) {
                    return '#91c19c'
                  }
                  if (currentValue > 80 && currentValue <= 100) {
                    return '#76aa84'
                  }
                  if (currentValue > 100) {
                    return '#73a083'
                  }
                },
              },
            },
          },
          {
            name: '平均价格',
            type: 'line',
            symbol: 'circle', // 设定为实心点
            symbolSize: 1, // 设定实心点的大小
            data: this.personnelIndex,
            itemStyle: {
              normal: {
                color: '#e15759',
                lineStyle: {
                  color: '#e15759',
                  width: 3,
                },
                label: {
                  show: true,
                  position: 'left',
                  textStyle: {
                    fontSize: 12,
                    color: '#000000',
                  },
                  formatter: (params) => {
                    if (this.personnelIndex.length - 1 === params.dataIndex) {
                      return params.value
                    } else {
                      return ''
                    }
                  },
                },
              },
            },

          },
          {
            name: '边际价格',
            type: 'line',
            symbol: 'circle', // 设定为实心点
            symbolSize: 1, // 设定实心点的大小
            yAxisIndex: 1,
            data: this.personnelIndex1Data,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#4e79a7',
                },
                label: {
                  show: true,
                  position: 'left',
                  textStyle: {
                    fontSize: 12,
                    color: '#000000',
                  },
                  formatter: (params) => {
                    if (this.personnelIndex1.length - 1 === params.dataIndex) {
                      return params.value * 1000
                    } else {
                      return ''
                    }
                  },
                },

              },
            },
          },
        ],
      })
      window.onresize = myChart.resize
    },
    drawChart2() {
      const xzrEcharts2 = document.getElementById('xzrEcharts2') // 对应地使用ByClassName
      const myChart = this.$echarts.init(xzrEcharts2)
      myChart.setOption({
        xAxis: [
          {
            type: 'category',
            data: ['20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26'],
            axisPointer: {
              type: 'shadow',
            },
            axisLabel: {
              interval: 0,
              rotate: 90,
            },
          },
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        yAxis: [
          {
            type: 'value',
            name: '市场活跃指数',
            min: 0,
            max: 100,
            interval: 10,
          },
          {
            type: 'value',
            name: '房价指数',
            min: 0,
            max: 100,
            interval: 5,
            axisLabel: {
              formatter: '{value} k',
            },
          },
        ],
        series: [
          {
            name: '市场活跃指数',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 81, 60.2, 32.6, 20.0, 6.4, 3.3],
            itemStyle: {
              normal: {
                barBorderRadius: false,
                color: (params) => {
                  const currentValue = parseInt(params.value)
                  if (currentValue > 0 && currentValue <= 10) {
                    return '#ceeac5'
                  }
                  if (currentValue > 10 && currentValue <= 30) {
                    return '#b1dda8'
                  }
                  if (currentValue > 30 && currentValue <= 50) {
                    return '#9ecc96'
                  }
                  if (currentValue > 50 && currentValue <= 80) {
                    return '#91c19c'
                  }
                  if (currentValue > 80 && currentValue <= 100) {
                    return '#76aa84'
                  }
                  if (currentValue > 100) {
                    return '#73a083'
                  }
                },
              },
            },
          },
          {
            name: '平均价格',
            type: 'line',
            symbol: 'circle', // 设定为实心点
            symbolSize: 1, // 设定实心点的大小
            data: this.personnelIndex,
            itemStyle: {
              normal: {
                color: '#e15759',
                lineStyle: {
                  color: '#e15759',
                  width: 3,
                },
                label: {
                  show: true,
                  position: 'left',
                  textStyle: {
                    fontSize: 12,
                    color: '#000000',
                  },
                  formatter: (params) => {
                    if (this.personnelIndex.length - 1 === params.dataIndex) {
                      return params.value
                    } else {
                      return ''
                    }
                  },
                },
              },
            },

          },
          {
            name: '边际价格',
            type: 'line',
            symbol: 'circle', // 设定为实心点
            symbolSize: 1, // 设定实心点的大小
            yAxisIndex: 1,
            data: this.personnelIndex1Data,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#4e79a7',
                },
                label: {
                  show: true,
                  position: 'left',
                  textStyle: {
                    fontSize: 12,
                    color: '#000000',
                  },
                  formatter: (params) => {
                    if (this.personnelIndex1.length - 1 === params.dataIndex) {
                      return params.value * 1000
                    } else {
                      return ''
                    }
                  },
                },

              },
            },
          },
        ],
      })
      window.onresize = myChart.resize
    },
  },
}
</script>

<style scoped lang="scss">
  @import "../../assets/style/base";
  .xingZhenRegion_page{
    .xzr_w3_box1 {
      padding: pxTorem(30px);
      display: flex;
      justify-content: space-between;
      border-bottom: pxTorem(4px) solid #f0f0f0;
      font-size: pxTorem(30px);

      .xzr_w3_box1_left {
        display: flex;
        align-items: center;
        font-size: pxTorem(34px);

        .xzr_w3_box1_img {
          width: pxTorem(50px);
          height: pxTorem(50px);
          margin-right: pxTorem(10px);
        }

        .xzr_w3_box1_text {
          margin-right: pxTorem(12px);
        }
      }

      .xzr_w3_box1_right {
        .xzr_w3_box1_price {
          font-size: pxTorem(40px);
        }
      }
    }
    .xzr_page_warp3 {
      border-top: pxTorem(14px) solid #f0f0f0;
      margin-top: pxTorem(30px);
      .xzr_ads_warp1{
        padding: pxTorem(15px) pxTorem(30px);
        font-size: pxTorem(32px);
        border-bottom: pxTorem(6px) solid #f0f0f0;
        .xzr_ads_t{
          font-weight: 600;
        }
        .xzr_ads_con{
          word-break: break-all;
        }
      }
      .xzr_school_warp{
        padding: pxTorem(15px) pxTorem(30px);
        font-size: pxTorem(32px);
        border-bottom: pxTorem(6px) solid #f0f0f0;
        .xzr_sch_t{
          font-weight: 600;
        }
        .xzr_sch_con{
          margin-left: pxTorem(24px);
          color: #1296db;
          word-break: break-all;
          line-height: pxTorem(60px);
        }
      }

      .xzr_w3_box1 {
        padding: pxTorem(30px);
        display: flex;
        justify-content: space-between;
        border-bottom: pxTorem(4px) solid #f0f0f0;
        font-size: pxTorem(30px);

        .xzr_w3_box1_left {
          display: flex;
          align-items: center;
          font-size: pxTorem(34px);
          font-weight: bold;

          .xzr_w3_box1_img {
            width: pxTorem(50px);
            height: pxTorem(50px);
            margin-right: pxTorem(10px);
          }

          .xzr_w3_box1_text {
            margin-right: pxTorem(12px);
          }
        }

        .xzr_w3_box1_right {
          .xzr_w3_box1_price {
            font-size: pxTorem(40px);
            font-weight: bold;
          }
        }
      }

      .xzr_w3_options {
        display: flex;
        font-size: pxTorem(24px);
        justify-content: space-around;
        align-items: center;
        padding: pxTorem(10px) pxTorem(0px);

        .xzr_w3_opt1 {
        }

        .xzr_w3_opt2 {
          border: 1px solid #9f9f9f;
          padding: pxTorem(8px) pxTorem(14px);
        }

        .xzr_w3_opt3 {
          .xzr_w3_opt3_title {
            margin-top: pxTorem(-34px);
          }

          .xzr_w3_opt3_warp {
            position: relative;
            font-size: pxTorem(20px);

            .xzr_w3_opt3_line {
              height: pxTorem(20px);
              width: pxTorem(140px);
              margin-top: pxTorem(6px);
              background-image: linear-gradient(to right, #ceeac5, #73a083);
            }

            .xzr_w3_opt3_l {
              position: absolute;
              top: pxTorem(24px);
            }

            .xzr_w3_opt3_r {
              position: absolute;
              right: pxTorem(-20px);
              top: pxTorem(24px);
            }
          }
        }

        .xzr_w3_opt4 {
          .xzr_w3_opt4_title {
          }

          .xzr_w3_opt4_type {
            position: relative;

            .xzr_w3_opt4_span1 {
              position: relative;
              display: inline-block;
              margin-right: pxTorem(40px);
              padding-left: pxTorem(20px);
            }

            .xzr_w3_opt4_span2 {
              position: relative;
              display: inline-block;
            }

            .xzr_w3_opt4_span1:before {
              content: ' ';
              position: absolute;
              top: pxTorem(6px);
              left: pxTorem(-4px);
              width: pxTorem(20px);
              height: pxTorem(20px);
              background-color: #4e79a7;
            }

            .xzr_w3_opt4_span2:before {
              content: ' ';
              left: pxTorem(-24px);
              position: absolute;
              top: pxTorem(6px);
              width: pxTorem(20px);
              height: pxTorem(20px);
              background-color: #e15759;
            }

            .xzr_w3_opt4_c1 {
              position: relative;
              padding-left: pxTorem(20px);
            }

            .xzr_w3_opt4_c2 {
              position: relative;
              padding-left: pxTorem(20px);
            }

            .xzr_w3_opt4_c1:before {
              content: ' ';
              position: absolute;
              top: pxTorem(6px);
              left: pxTorem(-4px);
              width: pxTorem(20px);
              height: pxTorem(20px);
              background-color: #4e79a7;
            }

            .xzr_w3_opt4_c2:before {
              content: ' ';
              position: absolute;
              top: pxTorem(6px);
              left: pxTorem(-4px);
              width: pxTorem(20px);
              height: pxTorem(20px);
              background-color: #e15759;
            }
          }
        }

        .xzr_w3_opt5 {
          .xzr_w3_opt5_address {
            border: 1px solid #9f9f9f;
            display: flex;
            align-items: center;
            justify-content: space-around;
          }
        }
      }

      .xzr_w3_Echarts_warp {
        margin: pxTorem(15px) auto;
        .xzr_w3_trendEcharts {
          width: pxTorem(710px);
          margin: auto;
          height: pxTorem(820px);
        }
      }
      .xzr_recommend_warp{
        padding: 0 pxTorem(30px);
      }
    }
    .xzr_select_warp{
      display: flex;
      justify-content: space-between;
      padding: pxTorem(30px);
      font-size: pxTorem(34px);
      .xzr_select_type{
        display: flex;
        align-items: center;
        .xzr_type_text{
          color: #1296db;
          margin-right: pxTorem(10px);
          font-size: pxTorem(30px);
        }
      }
      .xzr_select_time{
        display: flex;
        align-items: center;
        .xzr_time_text{
          color: #1296db;
          margin-right: pxTorem(10px);
          font-size: pxTorem(30px);
        }
      }
    }

    .xzr_step_warp{
      .step_time{
        color: #333333;
        font-size: pxTorem(40px);
        padding: 0 0 pxTorem(15px) 0;
      }
      .step_con{
        font-size: pxTorem(28px);
        color: #333333;
        .step_con1{}
        .step_con2{}
        .step_con3{
          color: #1296db;
        }
        .step_con4{
          color: #1296db;
        }
        .step_con5{}
        .step_con6{}
      }
    }

    .xzr_type3_title{
      padding: pxTorem(30px);
      font-size: pxTorem(34px);
    }
    .xzr_type3_html{
      padding: pxTorem(30px);
      font-size: pxTorem(28px)!important;
      color: #666666;
    }
    /** 公共的标题***/
    .xzr_recommend_title{
      font-size: pxTorem(36px);
      color: #333333;
      border-bottom: 1px solid #dcdcdc;
      border-top: 1px solid #dcdcdc;
      display: flex;
      align-items: center;
      padding: pxTorem(15px) 0 pxTorem(15px) pxTorem(30px) ;
      .xzr_title_img{
        width: pxTorem(80px);
        height: pxTorem(80px);
      }
    }
  }
  .xingZhenRegion_page::-webkit-scrollbar {
    width: 0 !important;
    display: none;
  }
  /*.xzr_w3_box1,*/
  /*.xzr_page_warp3,*/
  /*.xzr_select_warp,*/
  /*.xzr_step_warp,*/
  /*.xzr_type3_title,*/
  /*.xzr_type3_html,*/
  /*.xzr_recommend_title::-webkit-scrollbar {*/
  /*  width: 0 !important;*/
  /*}*/

</style>
